<template>
  <div class="messages-container">
    <el-row :gutter="20">
      <!-- 左侧消息列表 -->
      <el-col :span="8">
        <el-card class="message-list-card">
          <template #header>
            <div class="card-header">
              <div class="header-title">
                <el-icon><ChatDotRound /></el-icon>
                <span>消息列表</span>
              </div>
              <div class="header-actions">
                <el-button type="primary" @click="refreshMessages" :loading="loading" size="small">
                  <el-icon><Refresh /></el-icon>
                </el-button>
              </div>
            </div>
          </template>
          
          <!-- 消息筛选 -->
          <div class="filter-container">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索消息内容"
              prefix-icon="Search"
              clearable
            />
            <div class="filter-options mt-10">
              <el-radio-group v-model="messageFilter" size="small" @change="handleFilterChange">
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="unread">未读</el-radio-button>
                <el-radio-button label="system">系统</el-radio-button>
                <el-radio-button label="passenger">乘客</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          
          <!-- 消息列表 -->
          <div class="message-list">
            <div
              v-for="message in filteredMessages"
              :key="message.id"
              class="message-item"
              :class="{ 
                'message-active': selectedMessage && selectedMessage.id === message.id,
                'message-unread': !message.read
              }"
              @click="selectMessage(message)"
            >
              <div class="message-avatar">
                <el-avatar :size="40" :src="message.avatar" v-if="message.type === 'passenger'" />
                <el-avatar :size="40" icon="Bell" v-else />
              </div>
              <div class="message-content">
                <div class="message-header">
                  <div class="message-sender">{{ message.sender }}</div>
                  <div class="message-time">{{ message.time }}</div>
                </div>
                <div class="message-preview">{{ message.content.substring(0, 30) }}{{ message.content.length > 30 ? '...' : '' }}</div>
              </div>
              <div class="message-badge" v-if="!message.read"></div>
            </div>
            <div v-if="filteredMessages.length === 0" class="no-data">
              没有{{ messageFilter === 'all' ? '' : messageFilter === 'unread' ? '未读' : messageFilter === 'system' ? '系统' : '乘客' }}消息
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 右侧消息详情 -->
      <el-col :span="16">
        <el-card class="message-detail-card">
          <template #header>
            <div class="card-header">
              <div class="header-title">
                <span>消息详情</span>
              </div>
              <div class="header-actions" v-if="selectedMessage">
                <el-button 
                  v-if="selectedMessage.type === 'passenger'" 
                  type="primary" 
                  size="small"
                  @click="replyMessage"
                >
                  回复
                </el-button>
                <el-popconfirm
                  title="确定要删除此消息吗？"
                  @confirm="deleteMessage"
                >
                  <template #reference>
                    <el-button type="danger" size="small">
                      <el-icon><Delete /></el-icon>
                    </el-button>
                  </template>
                </el-popconfirm>
              </div>
            </div>
          </template>
          
          <!-- 消息详情 -->
          <div v-if="selectedMessage" class="message-detail">
            <div class="message-detail-header">
              <div class="detail-sender">
                <el-avatar :size="50" :src="selectedMessage.avatar" v-if="selectedMessage.type === 'passenger'" />
                <el-avatar :size="50" icon="Bell" v-else />
                <div class="sender-info">
                  <div class="sender-name">{{ selectedMessage.sender }}</div>
                  <div class="sender-type">{{ selectedMessage.type === 'passenger' ? '乘客消息' : '系统通知' }}</div>
                </div>
              </div>
              <div class="detail-time">{{ selectedMessage.time }}</div>
            </div>
            
            <div class="message-detail-content">
              {{ selectedMessage.content }}
            </div>
            
            <div v-if="selectedMessage.orderInfo" class="order-info">
              <div class="section-title">相关订单信息</div>
              <el-descriptions :column="2" border>
                <el-descriptions-item label="订单号">{{ selectedMessage.orderInfo.id }}</el-descriptions-item>
                <el-descriptions-item label="状态">
                  <el-tag v-if="selectedMessage.orderInfo.status === 'completed'" type="success">已完成</el-tag>
                  <el-tag v-else-if="selectedMessage.orderInfo.status === 'cancelled'" type="info">已取消</el-tag>
                  <el-tag v-else-if="selectedMessage.orderInfo.status === 'pending'" type="warning">进行中</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="出发地">{{ selectedMessage.orderInfo.startLocation }}</el-descriptions-item>
                <el-descriptions-item label="目的地">{{ selectedMessage.orderInfo.endLocation }}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{ selectedMessage.orderInfo.createTime }}</el-descriptions-item>
                <el-descriptions-item label="金额">¥{{ selectedMessage.orderInfo.amount.toFixed(2) }}</el-descriptions-item>
              </el-descriptions>
              <div class="order-actions">
                <el-button type="primary" @click="viewOrderDetail">查看订单详情</el-button>
              </div>
            </div>
            
            <div v-if="selectedMessage.type === 'passenger'" class="message-reply">
              <div class="section-title">回复消息</div>
              <el-input
                v-model="replyContent"
                type="textarea"
                :rows="3"
                placeholder="请输入回复内容"
              />
              <div class="reply-actions">
                <el-button type="primary" @click="sendReply" :disabled="!replyContent.trim()">发送</el-button>
              </div>
            </div>
          </div>
          
          <div v-else class="no-message-selected">
            <el-empty description="请选择一条消息查看详情" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 消息加载状态
const loading = ref(false)

// 消息筛选
const searchKeyword = ref('')
const messageFilter = ref('all')

// 当前选中的消息
const selectedMessage = ref(null)

// 回复内容
const replyContent = ref('')

// 消息数据
const messagesList = ref([
  {
    id: 'M20230510001',
    sender: '系统通知',
    content: '尊敬的司机师傅，您的账户已成功通过资质审核，现在您可以开始接单了。请您安全驾驶，祝您生活愉快！',
    time: '2023-05-10 10:30',
    read: true,
    type: 'system',
    avatar: ''
  },
  {
    id: 'M20230510002',
    sender: '李同学',
    content: '师傅您好，我的包落在您的车上了，是一个黑色的背包，里面有重要文件，请问您看到了吗？',
    time: '2023-05-10 14:45',
    read: false,
    type: 'passenger',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    orderInfo: {
      id: 'O2023051001',
      status: 'completed',
      startLocation: '校园北门',
      endLocation: '火车站',
      createTime: '2023-05-10 08:30',
      amount: 25.5
    }
  },
  {
    id: 'M20230509001',
    sender: '系统通知',
    content: '您有一笔收入已到账，金额：¥280.00，请注意查收。',
    time: '2023-05-09 21:00',
    read: true,
    type: 'system',
    avatar: ''
  },
  {
    id: 'M20230509002',
    sender: '王同学',
    content: '师傅，感谢您的安全行车和热情服务，已给您五星好评！希望下次还能遇到您。',
    time: '2023-05-09 16:20',
    read: true,
    type: 'passenger',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    orderInfo: {
      id: 'O2023050902',
      status: 'completed',
      startLocation: '图书馆',
      endLocation: '华联商场',
      createTime: '2023-05-09 15:45',
      amount: 18.0
    }
  },
  {
    id: 'M20230508001',
    sender: '系统通知',
    content: '校园拼车平台将于5月12日凌晨2:00-4:00进行系统升级维护，期间可能无法正常接单，请您提前安排好行程。',
    time: '2023-05-08 10:00',
    read: true,
    type: 'system',
    avatar: ''
  }
])

// 筛选后的消息列表
const filteredMessages = computed(() => {
  let result = messagesList.value
  
  // 根据类型筛选
  if (messageFilter.value !== 'all') {
    if (messageFilter.value === 'unread') {
      result = result.filter(msg => !msg.read)
    } else {
      result = result.filter(msg => msg.type === messageFilter.value)
    }
  }
  
  // 关键字搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(msg => 
      msg.content.toLowerCase().includes(keyword) || 
      msg.sender.toLowerCase().includes(keyword)
    )
  }
  
  return result
})

// 处理筛选变化
const handleFilterChange = () => {
  // 筛选变化后，可能需要重置选中的消息
  if (selectedMessage.value && messageFilter.value !== 'all') {
    if (
      (messageFilter.value === 'unread' && selectedMessage.value.read) ||
      (messageFilter.value !== 'unread' && selectedMessage.value.type !== messageFilter.value)
    ) {
      selectedMessage.value = null
    }
  }
}

// 刷新消息
const refreshMessages = () => {
  loading.value = true
  // 模拟API请求
  setTimeout(() => {
    loading.value = false
    ElMessage.success('消息已刷新')
  }, 500)
}

// 选择消息
const selectMessage = (message) => {
  selectedMessage.value = message
  
  // 如果是未读消息，标记为已读
  if (!message.read) {
    message.read = true
    // 在实际项目中，应该调用API更新已读状态
  }
  
  // 清空回复内容
  replyContent.value = ''
}

// 回复消息
const replyMessage = () => {
  // 直接聚焦到回复框
  document.querySelector('.message-reply textarea').focus()
}

// 发送回复
const sendReply = () => {
  if (!replyContent.value.trim()) return
  
  // 模拟API请求
  // 在实际项目中，应该调用API发送回复
  
  ElMessage.success(`已回复给 ${selectedMessage.value.sender}`)
  
  // 清空回复内容
  replyContent.value = ''
}

// 删除消息
const deleteMessage = () => {
  // 从列表中移除
  const index = messagesList.value.findIndex(msg => msg.id === selectedMessage.value.id)
  if (index !== -1) {
    messagesList.value.splice(index, 1)
  }
  
  // 清空当前选中
  selectedMessage.value = null
  
  ElMessage.success('消息已删除')
}

// 查看订单详情
const viewOrderDetail = () => {
  ElMessage.info(`查看订单: ${selectedMessage.value.orderInfo.id}`)
  // 在实际项目中，应该跳转到订单详情页
}

// 组件挂载
onMounted(() => {
  // 可以在这里从API获取消息列表
})
</script>

<style scoped>
.messages-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.header-title .el-icon {
  margin-right: 8px;
  font-size: 20px;
}

.message-list-card {
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

.filter-container {
  margin-bottom: 15px;
}

.filter-options {
  display: flex;
  justify-content: center;
}

.mt-10 {
  margin-top: 10px;
}

.message-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 5px;
}

.message-item {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #EBEEF5;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}

.message-item:hover {
  background-color: #F5F7FA;
}

.message-active {
  background-color: #ECFEFF;
}

.message-unread {
  background-color: #F0F9EB;
}

.message-avatar {
  margin-right: 10px;
  position: relative;
}

.message-content {
  flex: 1;
  overflow: hidden;
}

.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.message-sender {
  font-weight: bold;
  color: #303133;
}

.message-time {
  font-size: 12px;
  color: #909399;
}

.message-preview {
  font-size: 13px;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #F56C6C;
}

.message-detail-card {
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

.message-detail {
  padding: 20px;
}

.message-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.detail-sender {
  display: flex;
  align-items: center;
}

.sender-info {
  margin-left: 15px;
}

.sender-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.sender-type {
  font-size: 12px;
  color: #909399;
}

.detail-time {
  font-size: 14px;
  color: #909399;
}

.message-detail-content {
  font-size: 16px;
  line-height: 1.6;
  color: #303133;
  padding: 20px;
  background-color: #F5F7FA;
  border-radius: 4px;
  margin-bottom: 20px;
}

.order-info {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  border-left: 4px solid #409EFF;
  padding-left: 10px;
}

.order-actions {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.message-reply {
  margin-top: 30px;
}

.reply-actions {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

.no-message-selected {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #909399;
}

.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  color: #909399;
  font-size: 14px;
}

/* 自定义滚动条 */
.message-list::-webkit-scrollbar {
  width: 6px;
}

.message-list::-webkit-scrollbar-thumb {
  background-color: #c0c4cc;
  border-radius: 3px;
}

.message-list::-webkit-scrollbar-track {
  background-color: #f5f7fa;
}
</style> 